*{
    box-sizing: border-box;
    outline: none;
}
html{
    font-size: 15px;
}
body{
    padding: 0;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

$base-font-size:1rem;

$font-sizes:(
    xs:0.6666, //10px
	sm:0.8666, //12px
	ls:0.9333, //14px
	md:1.2, //18px
	lg:2 //30px
);


@each $sizekey,$size in $font-sizes {
	.fs-#{$sizekey}{
		font-size: $size * $base-font-size;
	}
}

.d-f{
    display: flex;
}
.d-f-w{
    flex-wrap: wrap;
}
.d-f-cloum{
    flex-direction: column;
}
.d-f-flex{
    flex:1
}

$flex-js:(
	start:flex-start,
	end:flex-end,
	around:space-around,
	between:space-between,
	center:center
);

@each $key,$val in $flex-js {
	.d-jc-#{$key}{
		justify-content: $val;
	}
};

$flex-ai:(
	start:flex-start,
	end:flex-end,
    center:center,
    stretch:stretch
);

@each $key,$val in $flex-ai {
    .d-ai-#{$key}{
        align-items: $val;
    }
}

//margin padding设置
$spaces-types:(m:margin,p:padding);

$spaces-direction:(t:top,b:bottom,l:left,r:right);

$spaces-types-base:1rem;

$spaces-sizes:(0:0,1:0.25,2:0.5,3:1,4:1.5,5:3);

@each $key,$val in $spaces-types {
    @each $key2,$val2 in $spaces-sizes {
        .#{$key}-#{$key2}{
            #{$val}:$val2*$spaces-types-base
        }
    }
    @each $key2,$val2 in $spaces-sizes {
        .#{$key}y-#{$key2}{
            #{$val}-top:$val2*$spaces-types-base;
            #{$val}-bottom:$val2*$spaces-types-base
        }
        .#{$key}x-#{$key2}{
            #{$val}-left:$val2*$spaces-types-base;
            #{$val}-right:$val2*$spaces-types-base
        }
    }
    @each $key1,$val1 in $spaces-direction {
        @each $key2,$val2 in $spaces-sizes {
            .#{$key}#{$key1}-#{$key2}{
                #{$val}-#{$val1}:$val2*$spaces-types-base
            }
        }
    }
}